<template>
  <div>
    <div class="wangyi">
    </div>
    <van-form ref="refForm">
      <van-cell-group inset>
        <van-field v-model="loginForm.phone" clearable name="validator" validate-trigger="onChange" placeholder="请输入手机号"
          :rules="[{ required: true, message: '手机号格式错误', pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ }]" />
        <van-field v-model="loginForm.password" name="mima"  type="password" trigger="onBlur" placeholder="请输入密码"
          :rules="[{ required: true, message: '密码格式错误', pattern: /^[0-9]{6,18}$/ }]" clearable>
        </van-field>
        <div class="text">
          <span><router-link to="/register" class="yu">注册账号</router-link></span>
          <span><router-link to="/gophone" class="deng">使用密码验证登陆</router-link></span>
        </div>

      </van-cell-group>
      <div class="bnt">
        <van-button type="danger" style="width:335px;" @click="login">登陆</van-button>
      </div>
      <span class="qita">
        <van-checkbox v-model="loginForm.checked" checked-color="#b1b1b1" icon-size="17px" shape="square">
          同意
          <a href="">《服务条款》</a>
          和
          <a href="">《隐私政策》</a>
          和
          <a href="">《网易严选服务协议》</a>

        </van-checkbox>

      </span>
    </van-form>


    <div class="qitan">

      <router-link to="/login">
        <p class="qita">其他登陆方式 > </p>

      </router-link>

    </div>
    
  </div>
  <button></button>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter()
import { getCode, getLogin } from '@/api/login'
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';
const refForm = ref()
const loginForm = ref({
  password: '',
  phone: '',
  checked: true,
  isPassword:true
})
// 登录
const login = async () => {
  let res = refForm.value.getValidationStatus()
  console.log(res);
  
  if (res.validator&&res.mima == 'passed') {
    const phone = loginForm.value.phone
    const password = loginForm.value.password
    const result = await getLogin({ phone, password })
    console.log(result.data.token);
    
    if (result.code === 200) {
      localStorage.setItem('token',result.data.token)
      router.push('/personal')
    } else {
      showFailToast('登录失败');
    }
  }
}

</script>

<style scoped>
.wangyi {
  height: 115px;
  width: 100%;
  background: url(../../../assets/网易.png) no-repeat 110px 30px;
  background-size: 160px;
}

.text {

  display: flex;
  justify-content: space-between;
  margin: 0 15px;
  margin-top: 10px;
}

.deng {
  color: #7b7b7b;
  font-size: 6.2px;
}

.yu {
  color: #c0c0c0;
  font-size: 6.2px;
}

.bnt {
  padding-top: 12px;
  padding-left: 25px;
  padding-bottom: 10px;
}

.tex {
  display: flex;
  justify-content: center;
}

.tex p {
  font-size: 5px;
}

.tex p a {
  color: #1d89ff;
}

.xiaban {
  margin-top: 40px;
}

.qita {
  font-size: 12px;
  display: block;
  margin-left: 24px;
}

.qita a {
  color: #49a0ff;
}


.qitan {
  margin-left: 130px;
  margin-top: 50px;
}

.qitan p {
  color: black;
}
</style>